<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>

    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



</head>
<style type="text/css">
	html{
		padding: 0;
		margin: 0;
	 height: 100%; 
	}
	body{
		height: 100%;
	    background: url("images/640.webp") no-repeat;
		background-size: cover;
	    animation-duration:12s;
	}
	@keyframes myfirst
	{
	    0%   {background:url("images/640.webp");}
	    34%  {background:url("images/640.webp");}
	    67%  {background:url("images/640.webp");}
	    100% {background:url("images/640.webp");}
	}
	.form{background: rgba(255,255,255,0.2);width:400px;margin:120px auto;}
	/*阴影*/
	.fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}
	input[type="text"],input[type="password"]{padding-left:26px;}
	.checkbox{padding-left:21px;}
</style>
<body>
    <div class="container">
        <div class="form row">
            <div class="form-horizontal col-md-offset-3" id="login_form">
                <h3 class="form-title">用户登录</h3>
                <div class="col-md-9">
                    <div class="form-group">
                        <i class="fa fa-user fa-lg"></i>
                        <input class="form-control required" type="text" placeholder="Username" id="username" name="username" autofocus="autofocus" maxlength="20" required="required"/>
                    </div>
                    <div class="form-group">
                            <i class="fa fa-lock fa-lg"></i>
                            <input class="form-control required" type="password" placeholder="Password" id="password" name="password" maxlength="8" required="required"/>
                    </div>
                    <div class="form-group">
                        <label class="checkbox">
                            <input type="checkbox" name="remember" value="1" id="remenber"/>记住密码
                        </label>
						<span  style="margin-top: 10px;"><a href="register.html">没有账号？立即注册</a></span>
                    </div>
                    <div class="form-group" style="margin: 0;padding: 0;">
                        <button type="submit" class="btn btn-success text-center" name="submit" id="login" style="margin-left: 60px;margin-bottom: 20px;">登录</button>
                    </div>
					<div class="text" style="color: red;"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
	function ajax(){
					$.ajax({
						type: "get",//发送请求的类型post，get
						dataType: "json",//默认是text
						url: `http://127.0.0.1:7300/mock/5ee96c5cc5fadd342c8a0931/totalData/login`,//发送的地址
						success: function (msg) {//成功的回调
						var data=msg.data
						$('#login').click(function(){
							let username=$('#username').val()
							let password=$('#password').val()
							console.log(username+password);
							let flag=1
								for(let i=0;i<data.length;i++){
								if(username==data[i].userName&&password==data[i].password){
									flag=1
									console.log(flag);
									// alert('登录成功')
									
												setInterval(go, 1000);
											var x=3; //利用了全局变量来执行
											function go(){
											x--;
												if(x>0){
													localStorage.setItem('name',username)
												// document.getElementById("sp").innerHTML=x;  //每次设置的x的值都不一样了。
												$('.text').html('登录成功，还有'+x+'秒跳转页面')
												console.log(x);
												}else{
												location.href='index.html';
												}
											}
									
									break
								}else{
									flag=0
									
								}
								
								
							}
							if(flag==0){
								alert('用户名或密码输入出错！')
							}
						})
						
						
		
		
			
		
		
		
							
						},
						error: function (error) {
							console.log(error.responseText);
						}
					});
				}
	     
					ajax();
</script>